<template>
  <div>
    <div>
      <el-row>
        <el-button icon="el-icon-circle-plus" type="primary" size="mini" circle @click="addBanner"></el-button>
        <el-button icon="el-icon-video-camera-solid" type="info" size="mini" circle
                   @click="gotoShow"></el-button>
      </el-row>

      <el-row>
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="日期">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="幻灯片">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>跳转地址: {{ scope.row.toRouterUrl }}</p>
                <p>跳转路由: {{ scope.row.toUrl }}</p>
                <div slot="reference" class="name-wrapper" style="width: 80px; height: 40px">
                  <div class="block" style="width: 100%; height: 100%">
                    <el-image :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]"
                              fit="scale-down"></el-image>
                  </div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="跳转地址">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.toRouterUrl ? scope.row.toRouterUrl : "无" }}</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="跳转路由">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.toUrl ? scope.row.toUrl : "无" }}</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="排序">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.sort }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope, scope.row)">编辑</el-button>
              <el-popconfirm
                :title="getPrompt(scope.row.id)"
                @confirm="handleDelete(scope.row)">
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <BannerAdd ref="childerBanner" :bannerId="0"></BannerAdd>
      <BannerEdit ref="childerEdit" :banner-data="helpBannerData"></BannerEdit>
    </div>

  </div>
</template>


<script>

import {format} from "../../api/index";
import BannerAdd from '../../components/banner/banneradd'
import BannerEdit from '../../components/banner/banneredit'


export default {
  name: "Banner",
  components: {
    BannerEdit,
    BannerAdd
  },
  data() {
    return {
      showBanner: true,
      helpBannerData: {}, // 修改的轮播图对象
      showDialog: false,
      tableData: []
    }
  },

  created() {
    this.getList();
  },

  methods: {
    /*去展示*/
    gotoShow() {
      console.log(11);
      this.$router.push({name: '/Banner/info'})
      // this.$parent.$router.push({name: 'ShowBanner'})
      // console.log(22);
    },


    /*消息提示*/
    getPrompt(id) {
      return `确认删除当前轮播图吗？删除无法回退`;
    },

    /*添加轮播图*/
    addBanner() {
      this.$refs.childerBanner.transitionVisible();
    },

    /*查询需要编辑的轮播图*/
    handleEdit(index, row) {
      this.$axios.get('/sys/banner/'+row.id).then((res) => {
        console.log(res);
        this.helpBannerData = res.data.data;
        this.$refs.childerEdit.dialogTableVisible = true;
      })
    },

    /*删除轮播图*/
    handleDelete(row) {
      this.$axios.delete('/sys/banner/'+ row.id).then((res) => {
        this.$message({
          message: '删除成功',
          type: 'success'
        });

        this.getList();
      })
    },

    /* 将所有幻灯片查询出来 */
    getList() {
      this.$axios.get('/sys/banner')
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.tableData.forEach((e) => {
            e.updateTime = format(e.updateTime)
          })
        })
        .catch((err) => {

        })
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 10px;
}
</style>
